<template>
    <div class="container">
        <div class="header">
            <img src="http://chst.vip:8081/todolist/static/media/logo.dc230d7c3cb96c91409eaedab952337e.svg" width="80" height="80" alt="">
            <div class="title">To-Do List</div>
        </div>
        <div class="from-field">
            <h1>~ 开始努力写代码了 ~</h1>
        </div>
        <inputCom @add="addTodo" ></inputCom>
        <listCom :arr="newData" @del="delTodo" @filterFlag="filterFlag" :allCount="allCount" :completeCount="completeCount" :activeCount="activeCount"></listCom>
    </div>
</template>

<script setup>
import inputCom from "./input.vue"
import listCom from "./list.vue"
import {ref,computed} from "vue"

  // 声明数据
    let arr = ref([
        {
            id:1,
            todo:'吃',
            isComputed:false
        },
        {
            id:2,
            todo:'喝',
            isComputed:false
        }
    ])

    // 增加todo
    let addTodo = function(input){

      let obj = {
        id:Math.random().toString(32).substring(2),
        todo:input,
        isComputed:false
      }

      arr.value.push(obj)
      localStorage.setItem('txt2',JSON.stringify(arr.value))
    }

    // 删除todo
    let delTodo = function(i){
      arr.value.splice(i,1)
      localStorage.setItem('txt2',JSON.stringify(arr.value))
    }

    // 永久存储
    arr.value = JSON.parse(localStorage.getItem('txt2'))

    // 详情按钮
    let filtermsg = ref('all')
    let filterFlag = function(input){
      console.log(input)
      filtermsg.value = input
    }


    // 处理数据三个响应式变量
    let allCount = ref(0)
    let completeCount = ref(0)
    let activeCount = ref(0)

    let newData =  computed(()=>{
      // 全部显示
      let all = arr.value

      // 显示已完成
      let complete = arr.value.filter(item=>item.isComputed)

      // 显示未完成
      let active = arr.value.filter(item=>!item.isComputed)

      allCount.value = all.length;

      completeCount.value = complete.length
      
      activeCount.value = active.length

      switch(filtermsg.value){
        case "all" :
          return all
        case "complete" :
          return complete
        case "active" :
          return active
      }

    })
    
        
  
  





</script>



<style scoped>
  fieldset{
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}
legend{
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;

}
.container{
    background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;
  }

    .title{
      background: #ed0e7a5e;
      border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
      color: #fff;
      font-size: 21px;
      padding: 0.25em 0.8em 0.15em;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
      -webkit-user-select: none;
      user-select: none;

    }
    .header{
      align-items: center;
      display: flex;
      justify-content: center;
    }
    .from-field{
      margin-top: 25px;

    }
    .from-field h1{
      color: #00bfff;
      font-size: 22px;
      margin-bottom: 18px;
    }

</style>